<template>
    <div class="goods-detail">
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">商品名称：</span>
                <el-input class="input" disabled v-model="goods.goods_name"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">所属地区：</span>
                <el-input class="input" disabled v-model="goods.address_name"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">商品品牌：</span>
                <el-input class="input" disabled v-model="goods.car_brand_name"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">所属库存：</span>
                <el-input class="input" disabled v-model="goods.inventory"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">原价：</span>
                <el-input class="input" disabled v-model="goods.original_price"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">特惠价：</span>
                <el-input class="input" disabled v-model="goods.special_price"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="12">
                <span class="label">上架时间：</span>
                <el-input class="input" disabled v-model="goods.putaway_time"></el-input>
            </el-col>
            <el-col class="col-item" :span="12">
                <span class="label">结束时间：</span>
                <el-input class="input" disabled v-model="goods.end_time"></el-input>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="24">
                <span class="label">首页图片：</span>
                <a class="img-wrapper" :href="goods.header_image" target="_blank">
                    <img :src="goods.header_image" alt="" class="img-header">
                </a>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col class="col-item" :span="24">
                <span class="label">商品图片：</span>
                <a v-for="url in goods.goods_images" class="img-wrapper" :href="url" target="_blank">
                    <img :src="url" alt="" class="img-goods">
                </a>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col style="display: flex; align-items: flex-start;" class="col-item" :span="24">
                <span class="label">商品描述：</span>
                <div class="goods-desc" v-html="goods.goods_desc">

                </div>
            </el-col>
        </el-row>
        <el-row class="row-group">
            <el-col style="display: flex; justify-content: center;" class="col-item" :span="24">
                <el-button @click="setCheckStatus(1)" type="primary">审核通过</el-button>
                <el-button @click="setCheckStatus(2)" type="primary">审核不通过</el-button>
                <el-button @click="$router.back()" type="primary">返回上一页</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script>
	function dateFormatter(formatter, date){
		date = (date ? new Date(date) : new Date)
		var Y = date.getFullYear() + '',
			M = date.getMonth() + 1,
			D = date.getDate(),
			H = date.getHours(),
			m = date.getMinutes(),
			s = date.getSeconds()
		return formatter.replace(/YYYY|yyyy/g, Y)
			.replace(/YY|yy/g, Y.substr(2, 2))
			.replace(/MM/g, (M < 10 ? '0' : '') + M)
			.replace(/DD/g, (D < 10 ? '0' : '') + D)
			.replace(/HH|hh/g, (H < 10 ? '0' : '') + H)
			.replace(/mm/g, (m < 10 ? '0' : '') + m)
			.replace(/ss/g, (s < 10 ? '0' : '') + s)
	}

	export default {
		data() {
			return {
				goods: {}
            }
        },
		methods: {
			getGoodsDetail() {
				var that = this;
				this.$http.post('/admin/preferential_car/index.php?act=preferentialCar&op=getOneById', {
					id: this.$route.query.id
                }).then(function(res) {
					if (res.code == 1) {
                        that.goods = res.data;
						that.goods.putaway_time = dateFormatter('YYYY-MM-DD HH:mm:ss', that.goods.putaway_time * 1000)
						that.goods.end_time = dateFormatter('YYYY-MM-DD HH:mm:ss', that.goods.end_time * 1000)
					}
					else {
						alert(res.msg);
					}
				})
			},
			async setCheckStatus(checkStatus) {
                try {
                    let reject_reason = '', cancel = false
                    if (checkStatus === 2) {
                        reject_reason = await this.$prompt('请输入不通过原因', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPlaceholder: '填写不通过原因',
                            // inputValue: this.group.reason || '',
                            inputValidator: value => {
                                if (!value) return '原因不能为空'
                                else if(value.length > 100) return '长度不能超过100个字符'
                                else return true
                            }
                        }).then(({ value }) => value).catch(() => (cancel = true))
                    }
                    if (cancel) return
				    const res = await this.$http.post('/admin/preferential_car/index.php?act=preferentialCar&op=auditGoods', {
				    	id: this.goods.id,
				    	audit_status: checkStatus,
                        reject_reason
				    })
                    if (res.code == 1) {
				    	this.$router.back()
				    } else {
                        throw res.msg
				    }
                } catch(error) {
                    this.$message.error(`${error}`)
                }
			},
        },
		created() {
			this.$parent.tabLists = [
				{"label": "特惠好车", "name": 'on-sale-good-car'},
				{"label": "商品详情", "name": 'goods-detail'},
				{"label": "报名信息", "name": 'reg-info'}
            ]
			this.getGoodsDetail();
        },
		name: "goods-detail"
	}
</script>

<style lang="scss" scoped>
    .goods-detail {
        width: 1170px;
        padding: 30px;
        .row-group {
            .col-item {
                .label {
                    display: inline-block;
                    font-weight: 600;
                    width: 100px;
                    text-align: right;
                }
                .input {
                    width: 400px;
                }
                .img-wrapper {
                    .img-header {
                        width: 300px;
                        height: 131.1px;
                        vertical-align: top;
                    }
                    .img-goods {
                        width: 200px;
                        height: 200px;
                        vertical-align: top;
                    }
                }
                .img-wrapper + .img-wrapper {
                    margin-left: 20px;
                }
                .goods-desc {
                    box-sizing: content-box;
                    width: 375px;
                    word-break:break-all;
                    border: 1px solid #000;
                    /deep/img {
                        width: 100%;
                        float: left;
                    }
                }
            }
        }
        .row-group + .row-group {
            margin-top: 20px;
        }
    }
</style>